<template>
  <div class="app-container"
       v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading">
    <div class="h-2 w-100 d-flex">
      <!-- 1号楼午休 房间照明智能控制设置 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼午休 房间照明智能控制设置</div>
            </div>
          </div>
          <div class="d-flex align-items-center justify-content-between item_content pt-2">
            <div class="h-100 width-48 border_one font-white font-14 pt-2 pb-2 pl-3 pr-3">
              <div class="h-100 w-100 position-relative">
                <div class="h-50 d-flex">
                  <div class="h-100 w-30 d-flex align-items-center">
                    <div class="d-flex-center">
                      <el-image class="item_width item_height" :src="oneFloorZmStatus==0?lamp_set_close:lamp_set"
                                fit="cover"></el-image>
                    </div>
                  </div>
                  <div class="h-100 w-70 pt-3 pb-3 d-flex flex-column justify-content-between">
                    <div>照明使用时段</div>
                    <div class="d-flex align-items-center justify-content-between">
                      <div>启用状态：</div>
                      <div>
                        <el-switch
                          @change="updateRule(oneFloorZm)"
                          v-model="oneFloorZm.isUse"
                          :active-value="1"
                          :inactive-value="0"
                          active-color="#13ce66"
                          inactive-color="#ff4949">
                        </el-switch>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="h-50 d-flex flex-column justify-content-around">
                  <div class="d-flex align-items-center justify-content-center">
                    <div>开启时间：</div>
                    <div class="">
                      <el-time-picker
                        @change="updateRule(oneFloorZm)"
                        v-model="oneFloorZm.openTime"
                        size="small"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="任意时间点">
                      </el-time-picker>
                    </div>
                  </div>
                  <div class="d-flex-center">
                    <div>关闭时间：</div>
                    <div class="d-flex justify-content-end">
                      <el-time-picker
                        @change="updateRule(oneFloorZm)"
                        v-model="oneFloorZm.closeTime"
                        size="small"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="任意时间点">
                      </el-time-picker>
                    </div>
                  </div>
                </div>
                <div class="position-absolute cursor-pointer" style="top: 0; right: 0;">
                  <div class="d-flex-center" @click="openWeekDialog(oneFloorZm)">
                    <el-image class="week" :src="week" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
            <div class="h-100 width-49 border_one font-white font-14 pt-2 pb-2 pl-3 pr-3">
              <div class="h-100 w-100 position-relative">
                <div class="h-50 d-flex">
                  <div class="h-100 width-30 d-flex align-items-center">
                    <div class="d-flex-center">
                      <el-image class="item_width item_height" :src="oneFloorKtStatus==0?kt_set_close:kt_set"
                                fit="cover"></el-image>
                    </div>
                  </div>
                  <div class="h-100 width-70 pt-3 pb-3 d-flex flex-column justify-content-between">
                    <div>空调使用时段</div>
                    <div class="d-flex align-items-center justify-content-between">
                      <div>启用状态：</div>
                      <div>
                        <el-switch
                          @change="updateRule(oneFloorKt)"
                          v-model="oneFloorKt.isUse"
                          :active-value="1"
                          :inactive-value="0"
                          active-color="#13ce66"
                          inactive-color="#ff4949">
                        </el-switch>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="h-50 d-flex flex-column justify-content-around">
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center w-100">
                      <div>开</div>
                      <div>启</div>
                      <div>模</div>
                      <div>式</div>
                      <div>：</div>
                      <el-select @change="updateRule(oneFloorKt)" v-model="oneFloorKt.model" size="small"
                                 style="width: 100%;"
                                 placeholder="请选择">
                        <el-option
                          v-for="item in ktOptions"
                          :key="item.command"
                          :label="item.commandName"
                          :value="item.command">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex-center w-50">
                      <div>开</div>
                      <div>启</div>
                      <div>时</div>
                      <div>间</div>
                      <div>：</div>
                      <div class="">
                        <el-time-picker
                          @change="updateRule(oneFloorKt)"
                          v-model="oneFloorKt.openTime"
                          style="width: 97%;"
                          size="small"
                          format="HH:mm"
                          value-format="HH:mm"
                          placeholder="任意时间点">
                        </el-time-picker>
                      </div>
                    </div>
                    <div class="d-flex-center w-50">
                      <div>关</div>
                      <div>闭</div>
                      <div>时</div>
                      <div>间</div>
                      <div>：</div>
                      <div class="d-flex justify-content-end">
                        <el-time-picker
                          @change="updateRule(oneFloorKt)"
                          v-model="oneFloorKt.closeTime"
                          style="width: 97%;"
                          size="small"
                          format="HH:mm"
                          value-format="HH:mm"
                          placeholder="任意时间点">
                        </el-time-picker>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="position-absolute cursor-pointer" style="top: 0; right: 0;">
                  <div class="d-flex-center" @click="openWeekDialog(oneFloorKt)">
                    <el-image class="week" :src="week" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 2号楼午休 房间空调智能控制设置 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">2号楼午休 房间空调智能控制设置</div>
            </div>
          </div>
          <div class="d-flex align-items-center justify-content-between item_content pt-2">
            <div class="h-100 width-48 border_one font-white font-14 pt-2 pb-2 pl-3 pr-3">
              <div class="h-100 w-100 position-relative">
                <div class="h-50 d-flex">
                  <div class="h-100 w-30 d-flex align-items-center">
                    <div class="d-flex-center">
                      <el-image class="item_width item_height" :src="twoFloorZmStatus==0?lamp_set_close:lamp_set"
                                fit="cover"></el-image>
                    </div>
                  </div>
                  <div class="h-100 w-70 pt-3 pb-3 d-flex flex-column justify-content-between">
                    <div>照明使用时段</div>
                    <div class="d-flex align-items-center justify-content-between">
                      <div>启用状态：</div>
                      <div>
                        <el-switch
                          @change="updateRule(twoFloorZm)"
                          v-model="twoFloorZm.isUse"
                          :active-value="1"
                          :inactive-value="0"
                          active-color="#13ce66"
                          inactive-color="#ff4949">
                        </el-switch>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="h-50 d-flex flex-column justify-content-around">
                  <div class="d-flex align-items-center justify-content-center">
                    <div>开启时间：</div>
                    <div class="">
                      <el-time-picker
                        @change="updateRule(twoFloorZm)"
                        v-model="twoFloorZm.openTime"
                        size="small"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="任意时间点">
                      </el-time-picker>
                    </div>
                  </div>
                  <div class="d-flex-center">
                    <div>关闭时间：</div>
                    <div class="d-flex justify-content-end">
                      <el-time-picker
                        @change="updateRule(twoFloorZm)"
                        v-model="twoFloorZm.closeTime"
                        size="small"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="任意时间点">
                      </el-time-picker>
                    </div>
                  </div>
                </div>
                <div class="position-absolute cursor-pointer" style="top: 0; right: 0;">
                  <div class="d-flex-center" @click="openWeekDialog(twoFloorZm)">
                    <el-image class="week" :src="week" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
            <div class="h-100 width-49 border_one font-white font-14 pt-2 pb-2 pl-3 pr-3">
              <div class="h-100 w-100 position-relative">
                <div class="h-50 d-flex">
                  <div class="h-100 width-30 d-flex align-items-center">
                    <div class="d-flex-center">
                      <el-image class="item_width item_height" :src="twoFloorKtStatus==0?kt_set_close:kt_set"
                                fit="cover"></el-image>
                    </div>
                  </div>
                  <div class="h-100 width-70 pt-3 pb-3 d-flex flex-column justify-content-between">
                    <div>空调使用时段</div>
                    <div class="d-flex align-items-center justify-content-between">
                      <div>启用状态：</div>
                      <div>
                        <el-switch
                          @change="updateRule(twoFloorKt)"
                          v-model="twoFloorKt.isUse"
                          :active-value="1"
                          :inactive-value="0"
                          active-color="#13ce66"
                          inactive-color="#ff4949">
                        </el-switch>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="h-50 d-flex flex-column justify-content-around">
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center w-100">
                      <div>开</div>
                      <div>启</div>
                      <div>模</div>
                      <div>式</div>
                      <div>：</div>
                      <el-select @change="updateRule(twoFloorKt)" v-model="twoFloorKt.model" size="small"
                                 style="width: 100%;"
                                 placeholder="请选择">
                        <el-option
                          v-for="item in ktOptions"
                          :key="item.command"
                          :label="item.commandName"
                          :value="item.command">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex-center w-50">
                      <div>开</div>
                      <div>启</div>
                      <div>时</div>
                      <div>间</div>
                      <div>：</div>
                      <div class="">
                        <el-time-picker
                          @change="updateRule(twoFloorKt)"
                          v-model="twoFloorKt.openTime"
                          style="width: 97%;"
                          size="small"
                          format="HH:mm"
                          value-format="HH:mm"
                          placeholder="任意时间点">
                        </el-time-picker>
                      </div>
                    </div>
                    <div class="d-flex-center w-50">
                      <div>关</div>
                      <div>闭</div>
                      <div>时</div>
                      <div>间</div>
                      <div>：</div>
                      <div class="d-flex justify-content-end">
                        <el-time-picker
                          @change="updateRule(twoFloorKt)"
                          v-model="twoFloorKt.closeTime"
                          style="width: 97%;"
                          size="small"
                          format="HH:mm"
                          value-format="HH:mm"
                          placeholder="任意时间点">
                        </el-time-picker>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="position-absolute cursor-pointer" style="top: 0; right: 0;">
                  <div class="d-flex-center" @click="openWeekDialog(twoFloorKt)">
                    <el-image class="week" :src="week" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-4 w-100 d-flex">
      <!-- 1号楼午休区空调 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title2 p10">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14 mr-3">1号楼午休区</div>
              <div class="d-flex-center font-white font-14 cursor-pointer">
                <div :class="isShowKt?'white2':'white'" @click="ktkgClick(isShowKt)">空调遥控器</div>
                <div class="mr-1 ml-1">/</div>
                <div :class="isShowKt?'white':'white2'" @click="ktkgClick(isShowKt)">空调开关</div>
              </div>
            </div>
          </div>
          <div class="item_content2">
            <div v-if="!isShowKt" class="w-100 h-100 d-flex flex-wrap align-items-start justify-content-start">
              <div class="w-100 h-50 p-2" v-for="(item, index) in threeCarData" :key="index">
                <div @click="setStatusByDevice(item,'five')" class="w-100 h-100">
                  <div :class="dataCardBgColor[item.socketColor]"
                       class="w-100 h-100 d-flex-center border_two over-hidden p-3">
                    <div class="w-100 h-100 d-flex flex-column justify-content-between">
                      <div class="font-white font-16">{{ index==0 ? '南空调': '北空调' }}</div>
                      <div class="d-flex-center">
                        <el-image class="image_size" :src="kt_list" fit="cover"></el-image>
                      </div>
                      <div class="d-flex align-items-end justify-content-center">
                        <div class="content_value font-40 mr-2">{{ item.airTmp }}</div>
                        <div class="content_unit font-16">°C</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="w-100 h-100 d-flex flex-wrap align-items-start justify-content-start">
              <div class="w-100 h-50 p-2" v-for="(item, index) in threeCarData2" :key="index">
                <div @click="setStatusByDevice(item,'five2')" class="w-100 h-100">
                  <div :class="dataCardBgColor[item.socketColor]"
                       class="w-100 h-100 d-flex-center border_two over-hidden p-3">
                    <div class="w-100 h-100 d-flex flex-column justify-content-between">
                      <div class="font-white font-16">{{ index==0 ? '南空调': '北空调' }}</div>
                      <div class="d-flex-center">
                        <el-image class="image_size" :src="ktkg_list" fit="cover"></el-image>
                      </div>
                      <div class="d-flex align-items-end justify-content-center">
                        <div class="content_value font-40 mr-2">{{ threeCarData3[index].deviceValue }}</div>
                        <div class="content_unit font-16">A</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼午休区照明 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title2 p10">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼午休区照明</div>
            </div>
          </div>
          <div class="item_content2">
            <div class="w-100 h-100 d-flex flex-wrap align-items-start justify-content-start">
              <div class="w-100 h-50 p-2" v-for="(item, index) in fourCarDataStatus" :key="index">
                <div @click="setStatusByDevice(item, 'other')" class="w-100 h-100">
                  <div :class="dataCardBgColor[item.socketColor]"
                       class="w-100 h-100 d-flex-center border_two over-hidden p-3">
                    <div class="w-100 h-100 d-flex flex-column justify-content-between">
                      <div class="font-white font-16">{{ index==0 ? '南照明': '北照明' }}</div>
                      <div class="d-flex-center">
                        <el-image class="image_size" :src="lamp" fit="cover"></el-image>
                      </div>
                      <div class="d-flex align-items-end justify-content-center">
                        <div class="content_value font-40 mr-2">{{ fourCarData[index].deviceValue }}</div>
                        <div class="content_unit font-14">A</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼午休区插座 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title2 p10">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼午休区插座</div>
            </div>
          </div>
          <div class="item_content2">
            <div class="w-100 h-100 d-flex flex-wrap align-items-start justify-content-start">
              <div class="w-100 h-50 p-2" v-for="(item, index) in fiveCarDataStatus" :key="index">
                <div @click="setStatusByDevice(item,'other')" class="w-100 h-100">
                  <div :class="dataCardBgColor[item.socketColor]"
                       class="w-100 h-100 d-flex-center border_two over-hidden p-3">
                    <div class="w-100 h-100 d-flex flex-column justify-content-between">
                      <div class="font-white font-16">{{ index==0 ? '插座1': '插座2' }}</div>
                      <div class="d-flex-center">
                        <el-image class="image_size" :src="socket" fit="cover"></el-image>
                      </div>
                      <div class="d-flex align-items-end justify-content-center">
                        <div class="content_value font-40 mr-2">{{ fiveCarData[index].deviceValue }}</div>
                        <div class="content_unit font-14">A</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 2号楼午休区空调 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title2 p10">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14 mr-3">2号楼午休区</div>
              <div class="d-flex-center font-white font-14 cursor-pointer">
                <div :class="isShowKt2?'white2':'white'" @click="ktkgClick2(isShowKt2)">空调遥控器</div>
                <div class="mr-1 ml-1">/</div>
                <div :class="isShowKt2?'white':'white2'" @click="ktkgClick2(isShowKt2)">空调开关</div>
              </div>
            </div>
          </div>
          <div class="item_content2">
            <div v-if="!isShowKt2" class="w-100 h-100 d-flex flex-wrap align-items-start justify-content-start">
              <div class="w-100 h-50 p-2" v-for="(item, index) in sixCarData" :key="index">
                <div @click="setStatusByDevice(item,'five')" class="w-100 h-100">
                  <div :class="dataCardBgColor[item.socketColor]"
                       class="w-100 h-100 d-flex-center border_two over-hidden p-3">
                    <div class="w-100 h-100 d-flex flex-column justify-content-between">
                      <div class="font-white font-16">{{ index==0 ? '南空调': '北空调' }}</div>
                      <div class="d-flex-center">
                        <el-image class="image_size" :src="kt_list" fit="cover"></el-image>
                      </div>
                      <div class="d-flex align-items-end justify-content-center">
                        <div class="content_value font-40 mr-2">{{ item.airTmp }}</div>
                        <div class="content_unit font-16">°C</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="w-100 h-100 d-flex flex-wrap align-items-start justify-content-start">
              <div class="w-100 h-50 p-2" v-for="(item, index) in sixCarData2" :key="index">
                <div @click="setStatusByDevice(item,'five2')" class="w-100 h-100">
                  <div :class="dataCardBgColor[item.socketColor]"
                       class="w-100 h-100 d-flex-center border_two over-hidden p-3">
                    <div class="w-100 h-100 d-flex flex-column justify-content-between">
                      <div class="font-white font-16">{{ index==0 ? '南空调': '北空调' }}</div>
                      <div class="d-flex-center">
                        <el-image class="image_size" :src="ktkg_list" fit="cover"></el-image>
                      </div>
                      <div class="d-flex align-items-end justify-content-center">
                        <div class="content_value font-40 mr-2">{{ sixCarData3[index].deviceValue }}</div>
                        <div class="content_unit font-16">A</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 2号楼午休区照明 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title2 p10">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">2号楼午休区照明</div>
            </div>
          </div>
          <div class="item_content2">
            <div class="w-100 h-100 d-flex flex-wrap align-items-start justify-content-start">
              <div class="w-100 h-50 p-2" v-for="(item, index) in sevenCarDataStatus" :key="index">
                <div @click="setStatusByDevice(item,'other')" class="w-100 h-100">
                  <div :class="dataCardBgColor[item.socketColor]"
                       class="w-100 h-100 d-flex-center border_two over-hidden p-3">
                    <div class="w-100 h-100 d-flex flex-column justify-content-between">
                      <div class="font-white font-16">{{ index==0 ? '南照明': '北照明' }}</div>
                      <div class="d-flex-center">
                        <el-image class="image_size" :src="lamp" fit="cover"></el-image>
                      </div>
                      <div class="d-flex align-items-end justify-content-center">
                        <div class="content_value font-40 mr-2">{{ sevenCarData[index].deviceValue }}</div>
                        <div class="content_unit font-14">A</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 2号楼午休区插座 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title2 p10">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">2号楼午休区插座</div>
            </div>
          </div>
          <div class="item_content2">
            <div class="w-100 h-100 d-flex flex-wrap align-items-start justify-content-start">
              <div class="w-100 h-50 p-2" v-for="(item, index) in eightCarDataStatus" :key="index">
                <div @click="setStatusByDevice(item,'other')" class="w-100 h-100">
                  <div :class="dataCardBgColor[item.socketColor]"
                       class="w-100 h-100 d-flex-center border_two over-hidden p-3">
                    <div class="w-100 h-100 d-flex flex-column justify-content-between">
                      <div class="font-white font-16">{{ index==0 ? '插座1': '插座2' }}</div>
                      <div class="d-flex-center">
                        <el-image class="image_size" :src="socket" fit="cover"></el-image>
                      </div>
                      <div class="d-flex align-items-end justify-content-center">
                        <div class="content_value font-40 mr-2">{{ eightCarData[index].deviceValue }}</div>
                        <div class="content_unit font-14">A</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 指令控制 -->
    <yc-dialog ref="controlDialog" dialogTitle="指令控制" :showCenter="false">
      <template #content>
        <div class="w-100 h-100 controlDialog" v-loading="loading2" element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading">
          <div class="mb-3" v-for="(item,index) in controlDataList" :key="index">
            <div class="mb-2 font-16 ml-1 white">{{item.name}}</div>
            <div class="d-flex flex-wrap">
              <div class="mr-2 ml-2 mb-3" v-for="(itemY,indexY) in item.list" :key="indexY"
                   @click="editControl(itemY, 'kt')">
                <div class="button_color white pl-3 pr-3 pt-2 pb-2 ">{{itemY.commandName}}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button @click="$refs.controlDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- 选择星期 -->
    <yc-dialog ref="weekDialog" :dialogTitle="dialogTitle" :showCenter="false" dialog-width="30%">
      <template #content>
        <div class="w-100 h-100 controlDialog">
          <div class="mb-4">
            <div class="d-flex align-items-center mb-3 font-18 white">
              <div class="line mr-2"></div>
              <div>选择开始星期</div>
            </div>
            <div class="d-flex">
              <div class="mr-3 p-2 week_normal white radius50 week"
                   :class="weekObj.opWeekDay.indexOf(itemY.value) != -1 ? 'week_check' : ''"
                   v-for="(itemY,indexY) in weekData"
                   :key="itemY.value" @click="handleClickWeek2(itemY.value)">{{itemY.name}}
              </div>
            </div>
          </div>
          <div class="mb-4">
            <div class="d-flex align-items-center mb-3 font-18 white">
              <div class="line mr-2"></div>
              <div>选择结束星期</div>
            </div>
            <div class="d-flex">
              <div class="mr-3 p-2 week_normal white radius50 week"
                   :class="weekObj.clWeekDay.indexOf(itemY.value) != -1 ? 'week_check' : ''"
                   v-for="(itemY,indexY) in weekData"
                   :key="itemY.value" @click="handleClickWeek1(itemY.value)">{{itemY.name}}
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="saveWeekButton(weekObj)">确定</el-button>
        <el-button @click="$refs.weekDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import {
    queryThreeListControlByStatus,
    queryFourListControlByNum,
    queryFourListControlByStatus,
    queryFiveListControlByNum,
    queryFiveListControlByStatus,
    querySixListControlByStatus,
    querySevenListControlByNum,
    querySevenListControlByStauts,
    queryEightListControlByNum,
    queryEightListControlByStauts,
    queryThreeListControlByStatusV2,
    querySixListControlByStatusV2,
    queryThreeListControlByStatusV3,
    querySixListControlByStatusV3,
    setStatusByDevice
  } from "@/api/noonBreak/electricityManagement"

  import {
    queryControlList,
    queryControlListV2,
    makeDeviceControl, queryControlListV3
  } from "@/api/dormOneBuildingOneFloor/electricityManagement"
  import ycDialog from "@/components/pageDialog"
  import { batchControl, queryPicLight, queryRule, updateRuleV2 } from "@/api/user"

  export default {
    components: {ycDialog},
    data() {
      return {
        lamp: require('@/assets/img/lamp_294.png'),
        socket: require('@/assets/img/socket_294.png'),
        lamp_set: require('@/assets/img/lamp_set.png'),
        kt_set: require('@/assets/img/kt_set.png'),
        lamp_set_close: require('@/assets/img/lamp_set_close.png'),
        kt_set_close: require('@/assets/img/kt_set_close.png'),
        kt_list: require('@/assets/img/kt_list_294.png'),
        ktkg_list: require('@/assets/img/ktkg.png'),
        week: require('@/assets/img/week.png'),

        timeout: [],

        switchData: true,
        ktOptions: [],
        ktOptions3: [],

        weekData: [
          {name: '一', value: 'MONDAY'},
          {name: '二', value: 'TUESDAY'},
          {name: '三', value: 'WEDNESDAY'},
          {name: '四', value: 'THURSDAY'},
          {name: '五', value: 'FRIDAY'},
          {name: '六', value: 'SATURDAY'},
          {name: '日', value: 'SUNDAY'},
        ],
        weekObj: {
          id: '',
          isUse: '',
          openTime: '',
          closeTime: '',
          model: '',
          modelName: '',
          opWeekDay: [],
          clWeekDay: [],
        },
        oneFloorKt: {},
        oneFloorKtStatus: 0,
        oneFloorZm: {},
        oneFloorZmStatus: 0,
        twoFloorKt: {},
        twoFloorKtStatus: 0,
        twoFloorZm: {},
        twoFloorZmStatus: 0,

        threeCarData: [],
        threeCarData2: [],
        threeCarData3: [],

        fourCarData: [],
        fourCarDataStatus: [],
        fiveCarData: [],
        fiveCarDataStatus: [],

        sixCarData: [],
        sixCarData2: [],
        sixCarData3: [],

        sevenCarData: [],
        sevenCarDataStatus: [],
        eightCarData: [],
        eightCarDataStatus: [],
        dataCardBgColor: ['item_bg_close', 'item_bg_open', 'item_bg_danger', 'item_bg_blue', 'item_bg_warning', 'bg-index-red', 'bg-index-orange'],
        dataItem: {},
        cardIndex: "",

        isShowKt: false,
        isShowKt2: false,

        dialogTitle: "",
        command: "",
        addOrUpdateLoading: false,

        loading: false,
        loading2: false,
        controlDataList: [],
      }
    },
    created() {
      this.queryRule()
      this.queryControlListTest()
      this.queryPicLight()

      this.queryThreeListControlByStatus()
      this.queryThreeListControlByStatusV2()
      this.queryThreeListControlByStatusV3()

      this.queryFourListControlByNum()
      this.queryFourListControlByStatus()

      this.queryFiveListControlByNum()
      this.queryFiveListControlByStatus()

      this.querySixListControlByStatus()
      this.querySixListControlByStatusV2()
      this.querySixListControlByStatusV3()

      this.querySevenListControlByNum()
      this.querySevenListControlByStauts()

      this.queryEightListControlByNum()
      this.queryEightListControlByStauts()
    },
    mounted() {
      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryThreeListControlByStatus()
        _this.queryThreeListControlByStatusV2()
        _this.queryThreeListControlByStatusV3()
        _this.queryFourListControlByStatus()
        _this.queryFiveListControlByStatus()
        _this.querySixListControlByStatus()
        _this.querySixListControlByStatusV2()
        _this.querySixListControlByStatusV3()
        _this.querySevenListControlByStauts()
        _this.queryEightListControlByStauts()
        _this.queryPicLight()
      }, 5000);

      this.timeout[1] = setInterval(() => {
        _this.queryFourListControlByNum()
        _this.queryFiveListControlByNum()
        _this.querySevenListControlByNum()
        _this.queryEightListControlByNum()
      }, 15000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryControlListTest() {
        queryControlListV2({
          deviceCode: 'DEVC2407258259342'
        }).then(res => {
          let tempData = res.object
          this.ktOptions = tempData[0].list
        })
      },
      queryRule() {
        queryRule({
          areaCode: 'r-s'
        }).then(res => {
          let tempData = res.object

          this.oneFloorKt = tempData.kt[0]
          this.oneFloorZm = tempData.zm[0]
          this.twoFloorKt = tempData.kt[1]
          this.twoFloorZm = tempData.zm[1]
        })
      },

      queryPicLight() {
        queryPicLight({
          areaCode: 'r-s'
        }).then(res => {
          let tempData = res.object

          this.oneFloorZmStatus = tempData[0]
          this.oneFloorKtStatus = tempData[2]
          this.twoFloorZmStatus = tempData[1]
          this.twoFloorKtStatus = tempData[3]
        })
      },

      updateRule(data) {
        updateRuleV2({
          id: data.id,
          isUse: data.isUse,
          openTime: data.openTime,
          closeTime: data.closeTime,
          model: data.model,
          modelName: data.modelName,
          opWeekDay: data.opWeekDay,
          clWeekDay: data.clWeekDay,
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.message
            })
            this.queryRule()
          } else {
            this.queryRule()
          }
        })
      },

      openWeekDialog(data) {
        this.weekObj.id = data.id
        this.weekObj.isUse = data.isUse
        this.weekObj.openTime = data.openTime
        this.weekObj.closeTime = data.closeTime
        this.weekObj.model = data.model
        this.weekObj.modelName = data.modelName
        this.weekObj.opWeekDay = data.opWeekDay ? data.opWeekDay.split(',') : []
        this.weekObj.clWeekDay = data.clWeekDay ? data.clWeekDay.split(',') : []

        this.dialogTitle = '选择星期'

        this.addOrUpdateLoading = false
        this.$refs.weekDialog.dialogVisible = true
      },

      handleClickWeek2(val) {
        let num = this.weekObj.opWeekDay.indexOf(val)
        if (num == -1) {
          this.weekObj.opWeekDay.push(val)
        } else {
          this.weekObj.opWeekDay.splice(num, 1)
        }
      },
      handleClickWeek1(val) {
        let num = this.weekObj.clWeekDay.indexOf(val)
        if (num == -1) {
          this.weekObj.clWeekDay.push(val)
        } else {
          this.weekObj.clWeekDay.splice(num, 1)
        }
      },

      saveWeekButton(data) {
        this.addOrUpdateLoading = true
        updateRuleV2({
          id: data.id,
          isUse: data.isUse,
          openTime: data.openTime,
          closeTime: data.closeTime,
          model: data.model,
          modelName: data.modelName,
          opWeekDay: data.opWeekDay.join(','),
          clWeekDay: data.clWeekDay.join(','),
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.message
            })
            this.queryRule()
            this.$refs.weekDialog.dialogVisible = false
            this.addOrUpdateLoading = false
          } else {
          }
        })
      },

      queryThreeListControlByStatus() {
        queryThreeListControlByStatus().then(res => {
          let tempData = res.object
          this.threeCarData = tempData
        })
      },
      queryThreeListControlByStatusV2() {
        queryThreeListControlByStatusV2().then(res => {
          let tempData = res.object
          this.threeCarData2 = tempData
        })
      },
      queryThreeListControlByStatusV3() {
        queryThreeListControlByStatusV3().then(res => {
          let tempData = res.object
          this.threeCarData3 = tempData
        })
      },

      queryFourListControlByNum() {
        queryFourListControlByNum().then(res => {
          let tempData = res.object
          this.fourCarData = tempData
        })
      },
      queryFourListControlByStatus() {
        queryFourListControlByStatus().then(res => {
          let tempData = res.object
          this.fourCarDataStatus = tempData
        })
      },

      queryFiveListControlByNum() {
        queryFiveListControlByNum().then(res => {
          let tempData = res.object
          this.fiveCarData = tempData
        })
      },
      queryFiveListControlByStatus() {
        queryFiveListControlByStatus().then(res => {
          let tempData = res.object
          this.fiveCarDataStatus = tempData
        })
      },

      querySixListControlByStatus() {
        querySixListControlByStatus().then(res => {
          let tempData = res.object
          this.sixCarData = tempData
        })
      },
      querySixListControlByStatusV2() {
        querySixListControlByStatusV2().then(res => {
          let tempData = res.object
          this.sixCarData2 = tempData
        })
      },
      querySixListControlByStatusV3() {
        querySixListControlByStatusV3().then(res => {
          let tempData = res.object
          this.sixCarData3 = tempData
        })
      },

      querySevenListControlByNum() {
        querySevenListControlByNum().then(res => {
          let tempData = res.object
          this.sevenCarData = tempData
        })
      },
      querySevenListControlByStauts() {
        querySevenListControlByStauts().then(res => {
          let tempData = res.object
          this.sevenCarDataStatus = tempData
        })
      },
      queryEightListControlByNum() {
        queryEightListControlByNum().then(res => {
          let tempData = res.object
          this.eightCarData = tempData
        })
      },
      queryEightListControlByStauts() {
        queryEightListControlByStauts().then(res => {
          let tempData = res.object
          this.eightCarDataStatus = tempData
        })
      },

      ktkgClick(type) {
        this.isShowKt = !type
      },
      ktkgClick2(type) {
        this.isShowKt2 = !type
      },

      setStatusByDevice(data, card) {
        this.dataItem = data
        this.cardIndex = card

        if (card == 'five') {
          this.queryControlList()
          this.$refs.controlDialog.dialogVisible = true
        } else {
          let obj = {}

          if (data.deviceList[data.deviceList.length - 2].deviceValue == '0') {
            obj = {
              command: '65365',
              commandName: '合闸',
              parameterCode: 'CTRL',
            }
          } else {
            obj = {
              command: '65280',
              commandName: '分闸',
              parameterCode: 'CTRL',
            }
          }
          this.editControl(obj, 'other')
        }
      },
      async queryControlList() {
        this.loading = true
        const {object} = await queryControlList({
          deviceCode: this.dataItem.deviceCode
        })
        this.controlDataList = object
        this.loading = false
      },
      editControl(data, type) {
        let titleName = '确定执行此操作吗, 是否继续?'
        if (type == 'other') {
          if (data.commandName == '合闸') {
            titleName = '确定执行合闸操作吗, 是否继续?'
          } else {
            titleName = '确定执行分闸操作吗, 是否继续?'
          }
        }
        this.$confirm(titleName, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {

          this.loading = true
          this.loading2 = true
          makeDeviceControl({
            deviceCode: this.dataItem.deviceCode,
            parameterCode: data.parameterCode,
            command: data.command,
            commandName: data.commandName,
          }).then(res => {
            if (res.status == 200 && (res.message == '指令发送成功' || res.message == '指令发送成功等待核验')) {
              setTimeout(() => {
                this.loading = false
                this.loading2 = false

                if (this.cardIndex == 'four') {
                  this.queryFourListControlByStatus()
                } else if (this.cardIndex == 'five') {
                  this.queryFiveListControlByStatus()
                } else if (this.cardIndex == 'one') {
                  this.queryOneListControlByStatus()
                } else {
                  this.querySixListControlByStatus()
                }

                this.$message({
                  type: "success",
                  message: res.message
                })
              }, 2000)
            } else {
              this.loading = false
              this.loading2 = false
            }
          })
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          })
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .width-70 {
    width: 70%;
  }

  .width-49 {
    width: 49%;
  }

  .width-48 {
    width: 48%;
  }

  .width-30 {
    width: 30%;
  }

  .item_width {
    width: 80px;
  }

  .item_height {
    height: 80px;
  }

  ::v-deep .el-radio-group .el-radio__label {
    color: #ffffff !important;
  }

  .item_bg_open {
    background-color: #1AA652;
    cursor: pointer;
  }

  .item_bg_open:hover {
    transform: scale(1.05);
  }

  .item_bg_danger {
    background-color: #df547b;
    cursor: pointer;
  }

  .item_bg_danger:hover {
    transform: scale(1.01);
  }

  .item_bg_close {
    background-color: #7A7A7A;
    cursor: pointer;
  }

  .item_bg_close:hover {
    transform: scale(1.05);
  }

  .item_bg_blue {
    background: #2C637A;
    cursor: pointer;
  }

  .item_bg_blue:hover {
    transform: scale(1.05);
  }

  .item_bg_warning {
    background: #B3A12F;
    cursor: pointer;
  }

  .item_bg_warning:hover {
    transform: scale(1.05);
  }

  .bg-index-red {
    background: #AF1F1F;
    cursor: pointer;
  }

  .bg-index-red：hover {
    transform: scale(1.05);
  }

  .content_value {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
    font-size: 40px;
  }

  .content_unit {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
    padding-bottom: 6px;
  }


  .border_one {
    border: 1px solid rgba(10, 96, 117, 0.62);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(102, 237, 246, 0.50) inset;
  }

  .border_two {
    border-radius: 6px;
  }

  .image_size {
    width: 95px;
    height: 95px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .white {
    color: #ffffff;
  }

  .button_color {
    cursor: pointer;
    background-color: #1A8B9A;
    border-radius: 4px;
  }

  .line {
    width: 5px;
    height: 20px;
    background-color: #1A8B9A;
    border-radius: 4px;
  }

  .week_normal {
    cursor: pointer;
    background-color: #335358;
  }

  .week_check {
    cursor: pointer;
    background-color: #1A8B9A;
  }
</style>
